/* eslint-disable prefer-const */
import {
  computed,
  defineComponent,
  h,
  PropType,
  reactive,
  resolveComponent,
  VNode,
} from 'vue';
import { useController, useNamespace } from '@ibiz-template/vue3-util';
import FormMDCtrlContainer from '../../form-mdctrl-container/form-mdctrl-container';
import { FormMDCtrlRepeaterGridController } from './form-mdctrl-repeater-grid.controller';
import './form-mdctrl-repeater-grid.scss';

export const FormMDCtrlRepeaterGrid = defineComponent({
  name: 'IBizFormMDCtrlRepeaterGrid',
  props: {
    controller: {
      type: Object as PropType<FormMDCtrlRepeaterGridController>,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('form-mdctrl');

    useController(props.controller);

    const c = props.controller;
    c.columns = reactive(c.columns);
    const tableData = computed(() => {
      return c.data.map(item => item);
    });
    return { ns, c, tableData };
  },
  render() {
    // // 绘制除分组列之外的表格列
    const renderColumn = (model: {
      codeName: string;
      caption: string;
    }): VNode => {
      const { codeName: columnName, caption } = model;
      // 表格列自定义
      return (
        <el-table-column label={caption} prop={columnName} align={'center'}>
          {{
            default: ({ row, $index }: IData): VNode | undefined => {
              if (this.c.editorMap[columnName!]) {
                const comp = resolveComponent(
                  this.c.editorMap[columnName!].provider.gridEditor,
                );
                return h(comp, {
                  value: row[columnName],
                  data: row,
                  controller: this.c.editorMap[columnName!].controller,
                  onChange: (val: unknown) => {
                    this.c.rowDataChange(val, columnName, $index);
                  },
                });
              }
            },
          }}
        </el-table-column>
      );
    };

    const renderIndex = (index: number): VNode => {
      return (
        <div class={this.ns.b('table-left')}>
          <span class={this.ns.b('table-left-index')}>{index + 1}</span>

          <el-popconfirm
            title='是否删除选中项'
            confirm-button-text='确认'
            cancel-button-text='取消'
            onConfirm={(): void => this.c.onDataRemove(index)}
          >
            {{
              reference: (): VNode => {
                return (
                  <el-button
                    size='mini'
                    type='danger'
                    text
                    class={this.ns.b('table-left-remove-btn')}
                  >
                    删除
                  </el-button>
                );
              },
            }}
          </el-popconfirm>
        </div>
      );
    };

    const renderContent = (): VNode => {
      return (
        <el-table
          class={this.ns.e('table')}
          show-header={true}
          data={this.tableData}
        >
          {{
            default: (): VNode[] => {
              return [
                <el-table-column type='index' index={renderIndex} />,
                ...this.c.columns.map(model => {
                  return renderColumn(model);
                }),
              ];
            },
          }}
        </el-table>
      );
    };

    return (
      <FormMDCtrlContainer
        controller={this.c.parent}
        onInsertButtonClick={(): void => {
          this.c.onDataInsert();
        }}
      >
        {renderContent()}
      </FormMDCtrlContainer>
    );
  },
});

export default FormMDCtrlRepeaterGrid;
